<template>
    <div class="historyFire">
        <div class="title">历史火灾</div>
        <div class="condotion">
            <div class="conditionBox">
                <!-- 时间 -->
                <el-date-picker
                    popper-class="eventTimePicker"
                    v-model="dateRange"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
                <!-- 类型 -->
                <div class="select">
                    <!-- <span>类型:</span>
                    <div class="type">
                        <el-select
                            popper-class="eventSelect"
                            v-model="eventType"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in typeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div> -->
                    <span>等级:</span>
                    <div class="level">
                        <el-select
                            popper-class="eventSelect"
                            v-model="eventLevel"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in levelOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <!-- 区划 -->
                <div class="area">
                    <span v-if="$store.state.userRegion=='海南省'">区划:</span>
                    <el-select v-model="eventAarea" 
                    placeholder="请选择区划"  v-if="$store.state.userRegion=='海南省'">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="eventAarea"></el-input> -->
                    <div class="search" @click="getEventData()">查询</div>
                </div>
            </div>
        </div>
        <div class="fireBox">
            <div
                :class="{ eventItem: true, activeEvent: currentId === item.id }"
                v-for="(item, index) of eventList"
                :key="index"
                @click="flyTo(item)"
            >
                <span class="eventItemSpan" :title="item.fireName">
                    <span class="orderNum">{{ index + 1 }}</span>
                    、{{ item.fireName }}
                </span>
                <span class="eventTime">
                    {{ item.fireTime }}
                </span>
            </div>
        </div>
        <!-- <div class="showReportBtn" @click="handleFormClick()">查看安全生产日报</div> -->
    </div>
</template>

<script>
import axios from "axios";
import pointeManager from "../../pointTFSJ";
import doc from "../../sjzxDoc";
import viewerInit from "../../../../cesiumPlugin/viewerInit";
let prodEventModel = [];
export default {
    name: "dangeDayForm",
    data() {
        return {
            currentId: 0,
            eventList: [],
            dateRange: null, //时间区间
            eventAarea: "", //行政区划
            // eventType: "", //火灾类型
            typeOption: [],
            eventLevel: "", //火灾等级
            levelOption: [
                { value: "", label: "全部" },
                { value: "一般火灾", label: "一般火灾" },
                { value: "较大火灾", label: "较大火灾" },
                { value: "重大火灾", label: "重大火灾" },
            ],
            options: [
                { value: "", label: "全部" },
                { value: "海口市", label: "海口" },
                { value: "万宁市", label: "万宁" },
                { value: "陵水黎族自治县", label: "陵水" },
                { value: "乐东黎族自治县", label: "乐东" },
                { value: "五指山市", label: "五指山" },
                { value: "定安县", label: "定安" },
                { value: "琼中黎族苗族自治县", label: "琼中" },
                { value: "文昌市", label: "文昌" },
                { value: "三亚市", label: "三亚" },
                { value: "琼海市", label: "琼海" },
                { value: "屯昌县", label: "屯昌" },
                { value: "儋州市", label: "儋州" },
                { value: "白沙黎族自治县", label: "白沙" },
                { value: "昌江黎族自治县", label: "昌江" },
                { value: "澄迈县", label: "澄迈" },
                { value: "保亭黎族苗族自治县", label: "保亭" },
                { value: "东方市", label: "东方" },
                { value: "临高县", label: "临高" },
                { value: "三沙市", label: "三沙" },
            ],
        };
    },
    mounted() {
        this.getEventData();
        this.$store.commit(
            "changeSjzxLeftCurrentComponent",
            "HistoryFireDetail"
        );
    },
    computed:{
        userRegion(){
            return this.$store.state.userRegion
        }
    },
    methods: {
        // 查询数据
        getEventData() {
            let xzqh = '';
            if(this.userRegion=="海南省"){
                xzqh = this.eventAarea || null;
            }else{
                xzqh = this.userRegion
            }
            let startTime = this.dateRange
                ? `${this.dateRange[0]} 00:00:00`
                : null;
            let endTime = this.dateRange
                ? `${this.dateRange[1]} 00:00:00`
                : null;
            let accidentLevel = this.eventLevel || null;
            
            axios
                .post(`${sjzxUrl}/api/forestFireDisaster/selectByParam`, {
                    params: {
                        startTime: startTime,
                        endTime: endTime,
                        accidentLevel: accidentLevel,
                        xzqh: xzqh,
                    },
                })
                .then(res => {
                    this.eventList = res.data.data;
                    pointeManager.removePointByType("历史火灾");
                    pointeManager.createPoint(
                        "历史火灾",
                        this.eventList,
                        "详情",
                        "leftClick",
                        this.pointHandleClick
                    );
                });
        },
        pointHandleClick(entity) {
            this.addBoundInfoBox(entity.position._value, "infoBox6");
            let obj = {};
            let dic = doc[entity.type];
            // 原顺序
            for (let key in dic) {
                obj[dic[key]] = entity.detail[key];
            }
            this.$store.commit("changeInfoBoxContent", obj);
            window.eventId = entity.id;
        },
        addBoundInfoBox(positionValue, elementId) {
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let preRenderListener = viewer.scene.preRender.addEventListener(
                function() {
                    let elWidth = oneDiv.offsetWidth;
                    let elHeight = oneDiv.offsetHeight; // + 60
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
                        position,
                        scratch
                    ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1.1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
                }
            );
        },
        flyTo(item) {
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                    item.lon,
                    item.lat,
                    20000
                ),
            });
            this.currentId = item.id;
        },
        // 显示报告
        handleFormClick() {
            this.$store.commit("changeDangerDayForm", "内容");
        },
        // 数据上球
        dataToEarth(data) {
            prodEventModel.forEach(ele => {
                viewer.entities.remove(ele);
            });
            data.forEach(item => {
                if (item.lon && item.lat) {
                    let entity = viewer.entities.add({
                        name: item.id + item.accidentNo,
                        id: item.id + item.accidentNo,
                        position: Cesium.Cartesian3.fromDegrees(
                            item.lon,
                            item.lat
                        ),
                        billboard: {
                            // image: `./images/fireIcon/caodi.png`,
                            image: `./images/sjzx/icons/生产安全事故.png`,
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            heightReference:
                                Cesium.HeightReference.CLAMP_TO_GROUND,
                            width: 30,
                            height: 30,
                            scaleByDistance: new Cesium.NearFarScalar(
                                10000,
                                1.5,
                                100000,
                                1
                            ),
                            disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        },
                        entityType: "prodEvent",
                    });
                    prodEventModel.push(entity);
                }
            });
        },
    },
    beforeUnmount() {
        pointeManager.removePointByType("历史火灾");
        //this.$store.commit('changeSjzxLeftCurrentComponent',"SjzxBasic")
        prodEventModel.forEach(ele => {
            viewer.entities.remove(ele);
        });
    },
};
</script>

<style lang="stylus">
.historyFire {
    .el-range-editor.el-input__inner, .el-date-editor .el-range-input {
        width: 100%;
        height: 30px;
        background: transparent;
    }

    .el-range-separator {
        color: #fff;
        height: unset;
    }

    .el-input__inner {
        height: 30px;
    }

    .el-select-dropdown__item span {
        color: #000;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .el-input__suffix, .el-input__icon {
        line-height: 30px;
    }

    .el-select {
        flex: 1;
    }
}

.eventSelect {
    .el-select-dropdown__item {
        text-align: center;

        span {
            color: #000;
        }
    }
}

.eventTimePicker {
    .el-date-range-picker__content .el-date-range-picker__header div, .el-date-table td span {
        color: #000;
    }
}
</style>
<style lang="stylus">
 ;

.historyFire {
    background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: vw(370);
    height: vh(555);
    margin-top: vh(15);
    display: flex;
    flex-direction: column;

    .title {
        text-align: center;
        font-size: vw(16);
    }

    .conditionBox {
        padding: 10px;

        .area, .type, .level {
            display: flex;
            justify-content: space-between;
            align-items: center;

            >span {
                width: 90px;
            }

            .search {
                width: 60px;
                height: 28px;
                line-height: 28px;
                margin-left: 10px;
                border: 1px solid #17d0ff;
                text-align: center;
                cursor: pointer;
                font-size: 16px;
            }
        }

        .select {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .type, .level {
                width: 83%;
            }
        }
    }

    .fireBox {
        flex: 1;
        margin: 5px 0;
        overflow: auto;

        .eventItem {
            margin: 0px 10px 10px 10px;
            text-align: left;
            overflow-y: scroll;
            color: #000;
            overflow: hidden; // 高度塌陷
            cursor: pointer;
            line-height: 25px;
            font-size: 14px;
            border-bottom: 1px dashed #eee;

            .eventItemSpan {
                .orderNum {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    background: #1296DB;
                    text-align: center;
                }
            }

            span.eventTime {
                float: right;
                line-height: 20px;
            }
        }

        .activeEvent, .eventItem:hover {
            color: #28639c;
        }
    }

    .showReportBtn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }
}
</style>
